<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" >
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimum-scale=1.0" >
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>查看大图</title>
		<link href="css/common.css" rel="stylesheet" type="text/css" >
		<!-- swiper css 5.4.1 -->
		<link rel="stylesheet" href="css/swiper.min.css">
		<script type="text/javascript" src="js/rem.js"></script>
		<style type="text/css">
			.full-window {
				width: 100%;
				height: 100vh;
				background: #000000;
				display: flex;
				align-items: center;
			}
			.ing{
				display:block;
				width:100%;
			}
			/* .swiper-container {
				--swiper-theme-color: #ff6600;
				--swiper-pagination-color: #00ff33;
			} */
			.swiper-pagination-customs {
				width: 0.16rem;
				height: 0.16rem;
				display: inline-block;
				background:rgba(255,255,255,0.5);
				border-radius: 50%;
				margin: 0 0.08rem;
				outline: 0;
			}
			.active {
				background:rgba(255,255,255,1);
			}
		</style>
	</head>
	<body>
		<div class="swiper-container">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide">
					<div class="full-window">
						<img class="ing"  src="img/img1.jpg" />
					</div>
				</div>
		        <div class="swiper-slide">
					<div class="full-window">
						<img class="ing"  src="img/img2.jpg" alt=""/>
					</div>
				</div>
		        <div class="swiper-slide">
					<div class="full-window">
						<img class="ing"  src="img/img3.jpg" alt=""/>
					</div>
				</div>
				<div class="swiper-slide">
					<div class="full-window">
						<img class="ing"  src="img/img4.jpg" alt=""/>
					</div>
				</div>
				<div class="swiper-slide">
					<div class="full-window">
						<img class="ing"  src="img/img5.jpg" alt=""/>
					</div>
				</div>
		    </div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>
		</div>
		
		<!-- swiper js 5.4.1 -->
		 <script src="js/swiper.min.js"></script>
		 <script>        
		    var mySwiper = new Swiper ('.swiper-container', {
				 on:{
					//点击事件
				    click: function(){
				      console.log('点击页面')
				    },
				  },
				loop: true, // 循环模式选项
				observer: true, //实时检测，动态更新
				// 如果需要分页器 
				pagination: {
					el: '.swiper-pagination',
					type: 'custom',
					renderCustom: function (swiper, current, total) {
						var customPaginationHtml = "";
						for(var i = 0; i < total; i++) {
						  //判断哪个分页器此刻应该被激活
						  if(i == (current - 1)){
						    customPaginationHtml += '<span class="swiper-pagination-customs active"></span>';
						  } else {
						    customPaginationHtml += '<span class="swiper-pagination-customs"></span>';
						  }
						}
						return customPaginationHtml;
					},
				}
				
		   })
		   </script>
	</body>
</html>
